<template>
    <view class="container" :class="{ paddingBottomBar: isShowBottomBar }">
        <view class="pricemain">
            <view class="top from">
                <view class="title">
                    <image src="/pages_supplier/static/icon-1.png"></image>{{ data.StatusName }}金额
                </view>
                <view class="price"> <view>￥</view>{{ data.Money }} </view>
                <view class="time">帐期：{{ data.StartTime }} 至 {{ data.EndTime }}</view>

                <!-- <view class="row row-1" v-if="data.Status==2 ||data.Status==3 ||data.Status==4 ||data.Status==5 || data.Status==6|| data.Status==7 "> -->
                <view class="row row-1">
                    <!--6,7  -->
                    <!-- <view v-if="(data.Status==6 || data.Status==7)&&data.CheckRemark ">
						<view class="row-label">驳回原因：</view>
						<view style="flex: 1;">{{data.CheckRemark}}</view>
					</view>

					<view v-if="data.Status==4 || data.Status==5 ">
						<view class="row-label">支付方式：</view>线下支付
					</view>
					<view v-if="data.Status==4 || data.Status==5 ">
						<view class="row-label">支付凭证：</view>
						<view class="imglist">
							<image class="img" v-for="img in easyImgList(data.PayImages)" :src="easyGetImgUrl(img)"
								:data-src="easyGetImgUrl(img)" @tap="previewImage" mode="aspectFill"></image>
						</view>
					</view>
					<view @click="showBillImg" v-if="(data.Status==2 ||data.Status==3 ||data.Status==4 ||data.Status==5 || data.Status==6)&&data.BillName">
						<view class="row-label">电子发票：</view>{{data.BillName}}
					</view>
					<view v-if="(data.Status==2 ||data.Status==3 ||data.Status==4 ||data.Status==5 || data.Status==6)&&data.InvoicingRemark ">
						<view class="row-label">发票备注：</view>{{data.InvoicingRemark}}
					</view> -->

                    <view
                        v-if="
                            data.CheckRemark &&
                            ((data.Status == 1 && (data.InvoicingRemark || data.InvoicingImages)) ||
                                data.Status == 6 ||
                                data.Status == 7)
                        ">
                        <view class="row-label">驳回原因：</view>
                        <view style="flex: 1">{{ data.CheckRemark }}</view>
                    </view>
                    <view v-if="data.PayImages"> <view class="row-label">支付方式：</view>线下支付 </view>
                    <view v-if="data.PayImages">
                        <view class="row-label">支付凭证：</view>
                        <view class="imglist">
                            <image
                                class="img"
                                v-for="img in easyImgList(data.PayImages)"
                                :src="easyGetImgUrl(img)"
                                :data-src="easyGetImgUrl(img)"
                                @tap="previewImage"
                                mode="aspectFill"></image>
                        </view>
                    </view>
                    <view @click="showBillImg" v-if="data.BillName">
                        <view class="row-label">电子发票：</view>{{ data.BillName }}
                    </view>
                    <view v-if="data.InvoicingRemark">
                        <view class="row-label">发票备注：</view>{{ data.InvoicingRemark }}
                    </view>
                </view>
            </view>
        </view>
        <view class="box">
            <view class="title">收款信息</view>
            <view class="row">
                <view v-if="data.CreateUserName">
                    <view class="row-label">接收方：</view>{{ data.CreateUserName }}
                </view>
                <view v-if="data.BankName"> <view class="row-label">银行名称：</view>{{ data.BankName }} </view>
                <view v-if="data.BankAccount"> <view class="row-label">银行账号：</view>{{ data.BankAccount }} </view>
                <view v-if="data.BankUserName"> <view class="row-label">账户名称：</view>{{ data.BankUserName }} </view>
            </view>
        </view>
        <view class="box">
            <view class="title title-arrow" @click="gotoList(0)">
                <view class="">付款订单 ￥{{ data.CashMoney }}</view>
                <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
            </view>
            <view class="title title-arrow" @click="gotoList(1)">
                <view class="">退款订单 ￥{{ data.RefoundMoney }}</view>
                <uni-icons type="arrowright" size="20" customIcons="icon-gray-1"></uni-icons>
            </view>
        </view>
        <view class="box">
            <view class="title">结算单信息</view>
            <view class="row">
                <view v-if="data.Status == 4 || data.Status == 5">
                    <view class="row-label">付款时间：</view>{{ data.payTime }}
                </view>
                <view> <view class="row-label">发起时间：</view>{{ data.AddTime }} </view>
                <view> <view class="row-label">发起人：</view>{{ data.CreateUserName }} </view>
            </view>
        </view>
        <view class="footer" v-if="isShowBottomBar">
            <view v-if="data.Status == 0" class="btn btn-success" @click="cancle">取消</view>
            <view v-if="data.Status == 1" class="btn btn-hollow" @click="showBillMsg">发票信息</view>
            <view v-if="data.Status == 1" class="btn btn-success" @click="showSubmitBill">提交</view>
            <view v-if="data.Status == 4" class="btn btn-hollow" @click="showReject">驳回</view>
            <view v-if="data.Status == 4" class="btn btn-success" @click="showSubmit">确认</view>
        </view>
        <!-- 取消申请 -->
        <uni-popup ref="popCancleTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>结算取消</text>
                </view>
                <view class="desc">是否确定取消该笔款项？</view>
                <view class="pop-action">
                    <view @click="CancleClose">返回</view>
                    <view @click="CancleConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
        <!-- 提交发票信息 -->
        <uni-popup ref="popBillTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>发票提交</text>
                </view>
                <view class="desc">是否确定提交发票？</view>
                <view class="pop-action">
                    <view @click="billClose">返回</view>
                    <view @click="billConfirm">确定</view>
                </view>
            </view>
        </uni-popup>

        <!-- 结算驳回 -->
        <uni-popup ref="popRejectTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>线下付款驳回</text>
                </view>
                <view style="text-align: center">是否确定驳回该笔款项？</view>
                <textarea v-model="rejectDesc" placeholder="请输入驳回原因" />
                <view class="pop-action">
                    <view @click="rejectClose">取消</view>
                    <view @click="rejectConfirm">确定</view>
                </view>
            </view>
        </uni-popup>

        <!-- 结算通过 -->
        <uni-popup ref="popSubmitTip" type="center" :animation="false">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>付款确认</text>
                </view>
                <view class="desc">是否确定收到该笔款项？</view>
                <view class="pop-action">
                    <view @click="submitClose">取消</view>
                    <view @click="submit">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import {
    GetSettlementOrderById,
    ConfirmSettlementOrder,
    CheckSettlementOrder,
    PaySettlementOrder,
} from "@/pages_supplier/service/api/buyOrder.js"
import { GetPeriod, CanclePeriod, InvoicingPeriod, CheckPayPeriod } from "@/pages_supplier/service/api/period.js"
import utils from "@/utils/utils.js"
import imgItem from "@/pages_supplier/components/form/img-item.vue"
export default {
    components: {
        imgItem,
    },
    data() {
        return {
            showBill: false,
            data: {},
            desc: "",
            rejectDesc: "",
            type: "datetime",
            isShowBottomBar: false,
            id: "",
            value: "",
            upimg: "",
            showPicker: false,
            payimglist: [],
            accessoryShow: true,
            imageValue: {},
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    computed: {
        ...mapGetters(["getBillMsg"]),
    },
    mounted() {
        this.getDetail()
        uni.setNavigationBarTitle({
            title: "采购结算",
        })
    },
    methods: {
        ...mapMutations(["SET_BILLMSG"]),

        // 进入订单列表
        gotoList(moneyType) {
            this.easyGoTo("/pages_supplier/packet/account/orderList?moneyType=" + moneyType + "&id=" + this.data.ID)
        },

        //获取详情
        getDetail() {
            let path = "?periodId=" + this.id
            this.isLoading = true
            GetPeriod(path).then((res) => {
                if (res.State == 1) {
                    this.data = res.Data
                    this.isLoading = false
                    uni.setNavigationBarTitle({
                        title: this.data.StatusName,
                    })
                    this.data.StartTime = this.data.StartTime.split(" ")[0]
                    this.data.EndTime = this.data.EndTime.split(" ")[0]
                    if (this.data.Status == 0 || this.data.Status == 1 || this.data.Status == 4) {
                        this.isShowBottomBar = true
                    } else {
                        this.isShowBottomBar = false
                    }
                    if (
                        (this.data.Status == 6 || this.data.Status == 7) &&
                        this.data.LogList &&
                        this.data.LogList.length > 0
                    ) {
                        this.data.RefuseReason = this.data.LogList[this.data.LogList.length - 1].OpRemark
                    }
                    if (this.data.LogList && this.data.LogList.length > 0) {
                        this.data.LogList.forEach((item) => {
                            if (item.OpType == 4) {
                                //发票信息
                                // this.data.BillPath = item.Images
                                // console.log(this.data.BillPath.split("/"))
                                // const arr = this.data.BillPath.split("/")
                                // if(arr&&arr.length>0){
                                // 	this.data.BillName = arr[arr.length-1]
                                // }
                                // this.data.billFullPath = this.easyGetImgUrl(item.Images)
                                // this.data.BillRemark = item.OpRemark
                            }
                            if (item.OpType == 7) {
                                //付款信息
                                this.data.payImgs = item.Images
                                this.data.payTime = item.AddTime
                            }
                        })
                    }
                    if (!this.data.InvoicingRemark || this.data.InvoicingRemark == "undefined") {
                        this.data.InvoicingRemark = ""
                    }
                    if (this.data.InvoicingImages && this.data.InvoicingImages != "undefined") {
                        const arr = this.data.InvoicingImages.split("/")
                        if (arr && arr.length > 0) {
                            this.data.BillName = arr[arr.length - 1]
                        }
                        this.data.BillFullPath = this.easyGetImgUrl(this.data.InvoicingImages)
                    } else {
                        this.data.InvoicingImages = ""
                    }
                }
            })
        },
        // 取消
        cancle() {
            this.$refs.popCancleTip.open()
        },
        CancleClose() {
            this.$refs.popCancleTip.close()
        },
        CancleConfirm() {
            let path = "?periodId=" + this.data.ID
            CanclePeriod(path).then((res) => {
                if (res.State == 1) {
                    this.$refs.popCancleTip.close()
                    this.upView()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        // 显示发票信息
        showBillMsg() {
            this.easyGoTo("/pages_supplier/packet/account/bill")
        },
        // 提交发票
        showSubmitBill() {
            console.log(this.getBillMsg)
            if (this.getBillMsg && !this.getBillMsg.remark && !this.getBillMsg.images) {
                this.easyToast("请填写发票信息！")
            } else {
                this.$refs.popBillTip.open()
            }
        },
        billClose() {
            this.$refs.popBillTip.close()
        },
        billConfirm() {
            // let requestData=JSON.parse(JSON.stringify(this.getBillMsg))
            // requestData.periodId=this.data.ID
            // console.log(requestData)
            let path = "?periodId=" + this.data.ID
            if (this.getBillMsg.images) {
                path += "&images=" + this.getBillMsg.images
            }
            if (this.getBillMsg.remark) {
                path += "&remark=" + this.getBillMsg.remark
            }
            console.log(path)
            InvoicingPeriod(path).then((res) => {
                if (res.State == 1) {
                    this.SET_BILLMSG({})
                    this.$refs.popBillTip.close()
                    this.upView()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },

        // 驳回
        showReject() {
            this.$refs.popRejectTip.open()
        },
        rejectClose() {
            this.$refs.popRejectTip.close()
        },
        rejectConfirm() {
            if (this.rejectDesc == "") {
                this.easyToast("请填写驳回原因")
                return false
            }
            let path = "?periodId=" + this.data.ID + "&checkStatus=0&remark=" + this.rejectDesc
            CheckPayPeriod(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("操作成功")
                    this.$refs.popRejectTip.close()
                    this.upView()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        // 确认付款
        showSubmit() {
            this.$refs.popSubmitTip.open()
        },
        submitClose() {
            this.$refs.popSubmitTip.close()
        },
        submit() {
            let path = "?periodId=" + this.data.ID + "&checkStatus=1"
            CheckPayPeriod(path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("操作成功")
                    this.$refs.popSubmitTip.close()
                    this.upView()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },

        showBillImg() {
            if (this.data.BillFullPath) {
                this.easyGoTo(
                    "/pages_supplier/packet/account/billImg?url=" + encodeURIComponent(this.data.BillFullPath),
                )
            }
        },

        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.easyImgList(this.data.PayImages),
            })
        },

        upView() {
            this.isShowBottomBar = false
            this.getDetail()
            this.UP_COMEGO_VIEW(new Date().getTime())
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: 24rpx;
}

.paddingBottomBar {
    padding-bottom: 130rpx;
}

.pricemain {
    border-radius: 24rpx;
    background: #ffffff;
    margin-bottom: 24rpx;
}

.top {
    padding: 0 24rpx;

    .title {
        font-size: 28rpx;
        color: $color-gray-1;
        padding: 32rpx 24rpx 24rpx 24rpx;
        display: flex;
        align-items: center;

        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
        }
    }

    .price {
        display: flex;
        justify-content: center;
        align-items: baseline;
        font-size: 64rpx;
        color: $color-gray-1;
        font-weight: bold;
        padding-bottom: 16rpx;

        view {
            font-size: 40rpx;
            color: $color-gray-1;
            font-weight: bold;
            position: relative;
            top: -4rpx;
        }
    }

    .time {
        font-size: 24rpx;
        color: $color-gray-3;
        text-align: center;
        padding-bottom: 24rpx;
        &:not(:last-child) {
            border-bottom: 2rpx solid #ebebeb;
            // padding-bottom: 24rpx;
        }
    }
}

.footer {
    width: 750rpx;
    height: 120rpx;
    background: #ffffff;
    box-shadow: 0px -2rpx 6rpx 0px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
        width: 304rpx;
        height: 80rpx;
        margin: 0 23rpx;
    }
    .btn-hollow {
        color: #222a42;
        border: 1rpx solid currentColor;
    }
}

.row {
    padding: 24rpx;

    & > view {
        display: flex;
        justify-content: flex-start;
        padding: 10rpx 0;
        font-size: 28rpx;
        color: $color-gray-1;
    }

    .row-label {
        color: $color-gray-3;
        text-align: justify;
        text-align-last: justify;
        width: 140rpx;
        flex-shrink: 0;
    }

    .imglist {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -12rpx;

        image {
            width: 148rpx;
            height: 148rpx;
            margin-right: 24rpx;
            border-radius: 8rpx;
            margin-bottom: 12rpx;

            &:nth-child(3n) {
                margin: 0;
            }
        }
    }
}

.row-1 {
    padding: 24rpx 0;
}

.box {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 24rpx;

    .title {
        font-size: 28rpx;
        color: $color-gray-1;
        height: 88rpx;
        display: flex;
        align-items: center;
        padding: 0 0 0 24rpx;
        font-weight: bold;
        border-bottom: 2rpx solid #ebebeb;
    }

    .title-arrow {
        border-bottom: none;
        justify-content: space-between;
        padding: 0 24rpx;
    }
}

.go {
    background: #ffffff;
    border-radius: 24rpx;
    height: 88rpx;
    align-items: center;
    font-size: 28rpx;
    color: $color-gray-1;
    font-weight: bold;
    padding: 0 24rpx;
    margin-bottom: 24rpx;
}
</style>
